<html>
    <head>
        <meta charset="utf-8">
        <script src="../dist/claygl.js"></script>
    </head>
    <body style="margin:0px;">
        <canvas id="main"></canvas>
        <script>
            var renderer = new clay.Renderer({
                canvas: document.getElementById('main'),
                devicePixelRatio: 1.0
            });
            renderer.resize(window.innerWidth, window.innerHeight);
            var camera = new clay.camera.Perspective();
            camera.aspect = renderer.getViewportAspect();
            camera.position.z = 3;

            var control = new clay.plugin.OrbitControl({
                domElement: renderer.canvas,
                target: camera
            });

            var scene = new clay.Scene();

            var loader = new clay.loader.GLTF();
            loader.load('assets/models/suzanne/suzanne.gltf');
            loader.success(function(res) {
                var geo = res.scene.getNode('Suzanne').geometry;
                var mesh = new clay.Mesh({
                    material: new clay.Material({
                        shader: clay.shader.library.get('clay.standard')
                    }),
                    geometry: geo
                });

                scene.add(mesh);
            })

            var light = new clay.light.Directional();
            light.position.set(1, 1, 1);
            light.lookAt(clay.Vector3.ZERO);
            scene.add(light);
            scene.add(new clay.light.Ambient({
                intensity : 0.5
            }));

            var picking = new clay.picking.RayPicking({
                renderer : renderer,
                scene: scene,
                camera: camera
            });

            var timeline =  new clay.Timeline();
            timeline.start();
            timeline.on('frame', function(dTime) {
                control.update(dTime);
                renderer.render(scene, camera);
            });

            var sphere = new clay.Mesh({
                material: new clay.Material({
                    shader: clay.shader.library.get('clay.basic')
                }),
                geometry: new clay.geometry.Sphere()
            });
            sphere.scale.set(0.02, 0.02, 0.02);
            sphere.material.set('color', [1, 0, 0]);
            scene.add(sphere);

            renderer.canvas.addEventListener('mousemove', function(e) {
                var res = picking.pick(e.offsetX, e.offsetY);
                if (res) {
                    sphere.position.copy(res.pointWorld);
                } else {
                    sphere.position.set(1000, 1000, 1000);
                }
            });
        </script>
    </body>
</html>